<route lang="json5" type="page">
{
  style: { navigationBarTitleText: "查看视频" },
}
</route>

<template>
  <view class="play">
    <video :src="pageData.src" controls show-center-play-btn :show-fullscreen-btn="false"></video>
    <view class="flex justify-around mt-6" v-if="pageData.src">
      <button
        open-type="share"
        class="m-0 !px-3 !py-1 !bg-transparent !text-sm overflow-hidden after:!border-gray outline-none btns"
      >
        分享
      </button>
      <view class="btn" @click="doAgain">再次制作</view>
      <view class="btn bg-black text-white !border-none" @click="saveVideo">复制视频链接</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { saveVideoToPhotosAlbum } from "@/utils"

interface PageDataType {
  src: string
  url: string
  roleId: number | null
}

const pageData = reactive<PageDataType>({
  src: "",
  url: "",
  roleId: null,
})

// 再做一次
function doAgain() {
  wx.reLaunch({
    url: `/pages/index/index?url=${pageData.url}&id=${pageData.roleId}`,
  })
}

// 保存视频
function saveVideo() {
  saveVideoToPhotosAlbum(pageData.src)
}

// 分享
onShareAppMessage(() => {
  return {
    title: "我刚刚制作了一个视频，快来一起看看吧！",
    path: `/pages/task-detail/task-detail?src=${pageData.src}`,
    imageUrl: pageData.url,
  }
})

onLoad((options) => {
  pageData.src = options?.src
  pageData.url = options?.url
  pageData.roleId = options?.id
})
</script>

<style scoped>
.play {
  width: 100%;
  height: 84vh;
}

video {
  width: 100%;
  height: 100%;
}
.btn {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 14px;
  border: 1px solid gray;
}
.btns {
  border: 1px solid gray;
  border-radius: 20px;
  font-size: 14px;
}
</style>
